<!--
	描述：通用的键值对录入方式弹窗
-->
<template>
	<dialogBody @confirm="confirm" @cancel="cancel" ref="body">
		<template slot="title">
			{{title}}
		</template>
		<div class="selectDevice">
			<!-- <div class="viewDevice">
				<p>系统权限</p>
				<multipleSelection ref="selectionView" :dataList="showDataList" style="height: 350px;"
				 :defaultCheckedIds="defaultCheckedIds" :selectionType="selectionType" :getIdMethod="getIdMethod"></multipleSelection>
			</div> -->
			<div class="viewDevice">
				<p>WEB权限</p>
				<multipleSelection ref="selectionMenu" :dataList="menuRightList" style="height: 350px;"
				 :defaultCheckedIds="defaultCheckedWebIds" :editDisableList="editDisableMenuList" :selectionType="selectionType" :getIdMethod="getIdMethod"></multipleSelection>
			</div>
			<div class="operateDevice">
				<p>APP权限</p>
				<multipleSelection ref="selectionApp" :dataList="appRightList" style="height: 350px;"
				 :defaultCheckedIds="defaultCheckedAppIds" :editDisableList="editDisableAppList" :selectionType="selectionType" :getIdMethod="getIdMethod"></multipleSelection>
			</div>
		</div>
	</dialogBody>
</template>

<script>
	import dialogBody from '@/components/module/dialog/dialogBody.vue'
	import multipleSelection from '@/components/module/selection/base/multipleSelection.vue'
	import userManagerStore from '@/page/userManager/userManagerStore.js'
	export default {
		components: {
			dialogBody,
			multipleSelection
		},
		props: [],
		data() {
			return {
				title: '',
				callback: undefined,
				pcmDefault: undefined,
				selectionType: 'multiple',
				getIdMethod: item => item.id,
				defaultCheckedIds: undefined,
				defaultCheckedWebIds: undefined,
				defaultCheckedAppIds: undefined,
				editDisableMenuList: undefined,
				editDisableAppList: undefined,
				filterInfo: ''
			}
		},
		computed: {
			allRightDatas(){
				return userManagerStore.state.allRightDatas
			},
			menuRightList() {
				return userManagerStore.state.allRightDatas.menuRight
			},
			appRightList() {
				return userManagerStore.state.allRightDatas.appRight
			}
		},
		watch: {},
		mounted() {},
		methods: {
			confirm() {
				if (this.callback != undefined) {
					var menuRight = []
					var menuKeys = Object.keys(this.$refs.selectionMenu.nowSelectIds)
					for(let i = 0;i < menuKeys.length;i++){
						if(this.$refs.selectionMenu.nowSelectIds[menuKeys[i]]){
							menuRight.push(menuKeys[i])
						}
					}
					var appRight = []
					var appKeys = Object.keys(this.$refs.selectionApp.nowSelectIds)
					for(let i = 0;i < appKeys.length;i++){
						if(this.$refs.selectionApp.nowSelectIds[appKeys[i]]){
							appRight.push(appKeys[i])
						}
					}
					var rightArr = menuRight.concat(appRight)
					var rightIds = rightArr.join(',')
					this.callback(rightIds)
				}
				this.close()
			},
			cancel() {
				this.close()
			},
			close() {
				this.$refs.body.hide()
				this.filterInfo = ''
			},
			open(title, roleRightList, callback) {
				this.title = title
				this.callback = callback
				this.defaultCheckedWebIds = this.getDefaultCheckedIds(roleRightList.menuRight)
				this.defaultCheckedAppIds = this.getDefaultCheckedIds(roleRightList.appRight)
				this.editDisableMenuList = this.getEditDisableList(roleRightList.menuRight)
				this.editDisableAppList = this.getEditDisableList(roleRightList.appRight)
				this.$refs.body.open()
			},
			getDefaultCheckedIds(arr){
				var result = []
				for(let i = 0;i < arr.length;i++){
					result.push(arr[i].id)
				}
				return result
			},
			getEditDisableList(arr){
				var editDisable = arr.filter(item=>{return !item.editable})
				var result = []
				for(let i = 0;i < editDisable.length;i++){
					result.push(editDisable[i].id)
				}
				return result
			}
		}
	}
</script>
<style scoped>
	.selectDevice{
		width: 100%;
		overflow: hidden;
	}
	
	.selectDevice>div{
		float: left;
		width: 50%;
		padding: 4px;
		box-sizing: border-box;
	}
	
	.viewDevice{
		border-right: dashed 1px #E4E4E4;
	}
		
	.selectDevice>>>.list-body{
		width: auto;
	}
</style>